<template>
  <div style="background-color: #ffffff;width: 100%;display: flex">
    <div style="flex: 5;background-color: #ebebeb;">
      <div style="position: relative;">
        <div style="position: absolute;right: 0;top: 0;background-color: #0073eb
        ;width: 300px;height: 400px;z-index: 999;display: flex;flex-direction: column;
        padding-left: 12px;padding-right:20px;padding-top: 12px">
          <span style="font-size: 20px;color: #ffffff">识别结果</span>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">抽烟</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="25" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.25</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">打电话</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">玩手机</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">喝水</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">闭眼</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">打哈欠</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">低头</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">吃东西</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">向后转</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <span style="font-size: 16px;color: #ffffff;flex: 1">整理头发</span>
            <div style="flex: 1;display: flex;align-items: center">
              <Progress :percent="16" hide-info ></Progress>
              <span style="color: #ffffff;font-size: 16px;margin-left: 10px">0.0017</span>
            </div>
          </div>
        </div>
        <img src="../../../assets/images/API/1.jpg" style="width: 100%;position: relative;margin-bottom: 0">
        <div style="width: 100%;position: absolute;bottom: 1%;height: 100px;background-color: rgba(0,0,0,0.4);">
          <div style="display: flex;width: 100%;position: absolute;top: 0%;padding-top: 20px">
            <Input v-model="value" placeholder="请输入网络图片URL" style="width: 500px;margin-left: 10px;height: 400px" class="test"></Input>
            <a style="color: #ffffff;height: 40px;width: 100px;border: 1px solid rgba(238,233,233,0.4);line-height: 40px;text-align: center;font-size: 16px;background-color: rgba(0,0,0,0.5);">检测</a>
            <span style="height: 40px;line-height: 40px;text-align: center;color: #ffffff;width: 100px;font-size: 16px;margin-top: 0">或</span>
            <Upload action="//jsonplaceholder.typicode.com/posts/">
              <Button type="primary" size="large" style="height: 40px;border-radius: 0;font-size: 16px">本地上传</Button>
            </Upload>
          </div>
          <span style="color: rgba(255,255,255,0.7);position: absolute;bottom: 0;font-size: 14px;margin-bottom: 10px;margin-left: 16px">
            此处仅供功能展示，图片类型支持PNG、JPG、JPEG、BMP，大小不超过2M。该接口实际能力的图片格式及大小要求以接口文档为准
          </span>
        </div>
      </div>
      <div style="height: 100px;margin-top: 20px;margin-bottom:20px;display: flex;">
        <img src="../../../assets/images/API/1.jpg" style="flex: 1;margin-left: 20px;border: solid 3px #0b83fd">
        <img src="../../../assets/images/API/2.jpg" style="flex: 1;margin-left: 20px">
        <img src="../../../assets/images/API/3.jpg" style="flex: 1;margin-left: 20px">
        <img src="../../../assets/images/API/4.jpg" style="flex: 1;margin-left: 20px">
        <img src="../../../assets/images/API/5.jpg" style="flex: 1;margin-left: 20px;margin-right: 20px">
      </div>
    </div>
<!--    <div style="padding-left: 20px;padding-top: 20px;">-->
      <Collapse v-model="value1" style="flex: 2;background-color: #fafafa;">
        <Panel name="1">
          <span style="font-size: 20px;">Request</span>
          <div slot="content" style="font-size: 16px">
            <p style="font-size: 18px;color: #000000">Params</p>
            <p>image="图片的Base64编码"</p>
            <p style="font-size: 18px;color: #000000">Post</p>
            <p>https://aip.baidubce.com/rest/2.0/image-classify/v1/driver_behavior?access_token="您的access_token"</p>
            <p style="font-size: 18px;color: #000000">Header</p>
            <p>header: Content-Type: "application/x-www-form-urlencoded"</p>
          </div>
        </Panel>
        <Panel name="2">
          <span style="font-size: 20px;">Response</span>
          <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
        </Panel>

      </Collapse>
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "API-running",
  data(){
    return{
      value:'',
    }

  }
}
</script>

<style>
  .test .ivu-input{
    background-color: rgba(0,0,0,0.5);
    font-size: 16px;
    border-radius: 0;
    border: 1px solid  #dcdee2;
    height: 40px;
    padding: 6px 10px;
    color: #ffffff;
    border: 1px solid rgba(238,233,233,0.4)
  }

  .ivu-progress-inner{
    background-color: #0073eb;
  }
  .ivu-progress-bg{
    background-color: #ffffff;
    border-radius: 0;
  }
  .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header{
    height: 46px;
    line-height: 46px;
  }
</style>
